<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      .box1 {
        background-color: red;
      }
      .box2 {
        background-color: blue;
      }
      .box3 {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div class="box1">11</div>
    <div class="box2">22</div>
    <div class="box3">33</div>
    <script>
      var btn = document.querySelectorAll("button");
      var box = document.querySelectorAll("div");
      /* btn.forEach(function (item, key) {
        item.onclick = function () {
          //   console.log(box[key]);
          //   console.log([...box]);
          //   this.style.display = "none";
          for (var i = 0; i < box.length; i++) {
            {
              box[i].style.display = "none";
            }
          }
          box[key].style.display = "block";

          btn.forEach(function (btn) {
            btn.style.background = "";
          });
          this.style.background = "cyan";
        };
      }); */

      btn.forEach(function (item, key) {
        item.onclick = function () {
          //   console.log(item, key);
          box.forEach(function (items, keys) {
            // console.log(items, keys);
            if (key == keys) {
              box[keys].style.display = "block";
            } else {
              box[keys].style.display = "none";
            }
          });
          btn.forEach(function (btn, index) {
            if (index == key) {
              btn.style.background = "cyan";
            } else {
              btn.style.background = "";
            }
          });
        };
      });
    </script>
  </body>
</html>
